/*
专家库页面
*/

<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-row>
          <el-col :span="3">
            <el-input
              class="expertsearch"
              v-model="specialistName"
              placeholder="请输入专家姓名"
            ></el-input>
          </el-col>
          <el-col :span="5">
            <el-select
              class="expertsearch"
              v-model="panelID"
              placeholder="请选择专家组"
            >
              <el-option label="请选择" value=" "></el-option>
              <el-option
                v-for="(item, index) in Searchoptions"
                :key="index"
                :label="item.panelName"
                :value="item.panelID"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="10">&nbsp;</el-col>
          <el-col style="text-align: right" :span="6">
            <el-button class="expertsearch" @click="show()" type="primary"
              >查询</el-button
            >
            <el-button class="expertsearch" @click="postgo()" type="success"
              >添加</el-button
            >
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-table
      ref="multipleTable"
      :data="tableData"
      border
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      tooltip-effect="dark"
      style="width: 100%; margin-top: 10px"
      @selection-change="handleSelectionChange"
      v-loading="loading"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="specialistName" label="专家姓名">
      </el-table-column>
      <el-table-column prop="specialistSex" label="专家性别">
        <template #default="scope">
          <span v-if="scope.row.specialistSex == 0">男</span>
          <span v-if="scope.row.specialistSex == 1">女</span>
          <span v-if="scope.row.specialistSex == 2">其它</span>
        </template>
      </el-table-column>
      <el-table-column label="专家技能" prop="specialistJob"> </el-table-column>
      <el-table-column prop="specialistPhone" label="专家联系方式">
      </el-table-column>
      <el-table-column prop="specialistEmail" label="专家邮箱">
      </el-table-column>
      <el-table-column label="出生日期" prop="specialistdatebirth">
      </el-table-column>
      <el-table-column prop="education" label="学历">
        <template v-slot="scope">
          <span v-if="scope.row.education == '1'">大专</span>
          <span v-if="scope.row.education == '2'">本科</span>
          <span v-if="scope.row.education == '3'">研究生</span>
          <span v-if="scope.row.education == '4'">硕士</span>
          <span v-if="scope.row.education == '5'">博士</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column prop="specialistStart" label="专家组状态">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.specialistStart == 0"
            >在线</el-tag
          >
          <el-tag type="info" v-if="scope.row.specialistStart == 1"
            >离线</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="panelID" label="所属专家组"> </el-table-column>
      <el-table-column label="操作" width="200">
        <template v-slot="sc">
          <el-button
            class="expertsearch"
            type="primary"
            @click="putgo(sc.$index, sc.row)"
            >编辑</el-button
          >
          <el-button
            class="expertsearch"
            type="danger"
            @click="DeleteDeclare(sc.$index, sc.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="添加" v-model="dialogPostVisible">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="专家姓名" prop="specialistName">
          <el-input v-model="ruleForm.specialistName"></el-input>
        </el-form-item>
        <el-form-item label="专家性别" prop="specialistSex">
          <el-radio v-model="ruleForm.specialistSex" :label="0">男</el-radio>
          <el-radio v-model="ruleForm.specialistSex" :label="1">女</el-radio>
          <el-radio v-model="ruleForm.specialistSex" :label="2">其他</el-radio>
        </el-form-item>
        <el-form-item label="专家技能" prop="specialistJob">
          <el-input v-model="ruleForm.specialistJob"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="specialistPhone">
          <el-input v-model="ruleForm.specialistPhone"></el-input>
        </el-form-item>
        <el-form-item label="专家邮箱" prop="specialistEmail">
          <el-input v-model="ruleForm.specialistEmail"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" prop="specialistdatebirth">
          <el-date-picker
            v-model="ruleForm.specialistdatebirth"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="专家组" prop="panelID">
          <el-checkbox-group v-model="ruleForm.panelID">
            <el-checkbox
              v-for="item in Searchoptions"
              :key="item.panelID"
              :label="item.panelID"
              >{{ item.panelName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="学历" prop="education">
          <el-radio v-model="ruleForm.education" :label="1">大专</el-radio>
          <el-radio v-model="ruleForm.education" :label="2">本科</el-radio>
          <el-radio v-model="ruleForm.education" :label="3">研究生</el-radio>
          <el-radio v-model="ruleForm.education" :label="4">硕士</el-radio>
          <el-radio v-model="ruleForm.education" :label="5">博士</el-radio>
          <!-- <el-radio-group v-model="ruleForm.education" size="medium">
            <el-radio
              v-for="item in Educationoption"
              :key="item"
              :label="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group> -->
        </el-form-item>

        <el-form-item label="地址" prop="address">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add()">添加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="修改" v-model="dialogPutVisible">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="专家姓名" prop="specialistName">
          <el-input v-model="ruleForm1.specialistName"></el-input>
        </el-form-item>
        <el-form-item label="专家性别" prop="specialistSex">
          <el-radio v-model="ruleForm1.specialistSex" :label="0">男</el-radio>
          <el-radio v-model="ruleForm1.specialistSex" :label="1">女</el-radio>
          <el-radio v-model="ruleForm1.specialistSex" :label="2">其他</el-radio>
        </el-form-item>
        <el-form-item label="专家技能" prop="specialistJob">
          <el-input v-model="ruleForm1.specialistJob"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="specialistPhone">
          <el-input v-model="ruleForm1.specialistPhone"></el-input>
        </el-form-item>
        <el-form-item label="专家邮箱" prop="specialistEmail">
          <el-input v-model="ruleForm1.specialistEmail"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" prop="specialistdatebirth">
          <el-date-picker
            v-model="ruleForm1.specialistdatebirth"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="专家组" prop="panelID">
          <el-checkbox-group v-model="ruleForm1.panelID">
            <el-checkbox
              v-for="item in Searchoptions"
              :key="item.panelID"
              :label="item.panelID"
              >{{ item.panelName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="学历" prop="education">
          <el-radio v-model="ruleForm1.education" :label="1">大专</el-radio>
          <el-radio v-model="ruleForm1.education" :label="2">本科</el-radio>
          <el-radio v-model="ruleForm1.education" :label="3">研究生</el-radio>
          <el-radio v-model="ruleForm1.education" :label="4">硕士</el-radio>
          <el-radio v-model="ruleForm1.education" :label="5">博士</el-radio>
          <!-- <el-radio-group v-model="ruleForm1.education" size="medium">
            <el-radio
              v-for="item in Educationoption"
              :key="item"
              :label="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group> -->
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="ruleForm1.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="index"
      :page-sizes="[2, 3, 4, 5]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="50"
    >
    </el-pagination> -->
  </div>
</template>
  <script>
import { JsonHubProtocol } from "@microsoft/signalr";
export default {
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("专家名称不能为空"));
      }
      let regNum = /[^\u4E00-\u9FA5]/g;
      if (regNum.test(value)) {
        callback(new Error("只能输入中文"));
      }
      if (value.length > 255) {
        callback(new Error("超出最大长度"));
      }

      this.http
        .get(
          "/api/tb_project_reviewspecial/BaseReviewspecialspecialistName?specialistName=" +
            value
        )
        .then((res) => {
          console.log(res);
          if (!res.data) {
            callback(new Error("已有此专家"));
          } else {
            callback();
          }
        });
    };
    return {
      size: 4,
      index: 1,
      Count: 0,
      loading: true,
      tableData: [],
      multipleSelection: [],
      //查询分组下拉
      Searchoptions: [],
      specialistName: "",
      panelID: "",

      //添加对象
      ruleForm: {
        specialistID: "",
        specialistName: "",
        specialistSex: 0,
        specialistJob: "",
        specialistPhone: "",
        specialistEmail: "",
        specialistdatebirth: "",
        education: "",
        address: "",
        createor: "",
        createDate: new Date(),
        Modifier: "",
        modifierTime: new Date(),
        isDel: 0,
        specialistStart: 0,
        panelID: [],
      },
      //修改对象
      ruleForm1: {
        specialistID: "",
        specialistName: "",
        specialistSex: 0,
        specialistJob: "",
        specialistPhone: "",
        specialistEmail: "",
        specialistdatebirth: "",
        education: "",
        address: "",
        createor: JSON.parse(localStorage.getItem("user")).userName,
        createDate: new Date(),
        Modifier: JSON.parse(localStorage.getItem("user")).userName,
        modifierTime: new Date(),
        isDel: 0,
        specialistStart: 0,
        panelID: [],
      },
      rules: {
        // specialistName: [
        //   { required: true, validator: checkAge, trigger: "blur" },
        // ],

        // specialistEmail: [
        //   { required: true, message: "请输入邮箱", trigger: "change" },
        //   {
        //     validator:
        //       /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
        //     message: "邮箱号格式不正确",
        //   },
        // ],
        // specialistPhone: [
        //   { required: true, message: "请输入专家手机号码", trigger: "change" },
        //   {
        //     validator:
        //       /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
        //     message: "手机号格式不正确",
        //   },
        // ],
        // specialistJob: [
        //   { required: true, message: "请输入专家技能", trigger: "change" },
        // ],
        // education: [
        //   { required: true, message: "请输入学历", trigger: "change" },
        // ],
        // address: [{ required: true, message: "请输入地址", trigger: "blur" }],
      },

      formLabelWidth: "120px",
      dialogPostVisible: false,
      dialogPutVisible: false,

      //学历
      // Educationoption: [
      //   {
      //     value: "1",
      //     label: "大专",
      //   },
      //   {
      //     value: "2",
      //     label: "本科",
      //   },
      //   {
      //     value: "3",
      //     label: "研究生",
      //   },
      //   {
      //     value: "4",
      //     label: "硕士",
      //   },
      //   {
      //     value: "5",
      //     label: "博士",
      //   },
      // ],
    };
  },
  created() {
    this.show();
    this.Searchselect();
    this.reveiveShowId();
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    postgo() {
      this.dialogPostVisible = true;
    },
    //获取ID并存入localStorage中
    putgo(index, row) {
      localStorage.id = row.specialistID;
      this.dialogPutVisible = true;
      this.reveiveShowId();
    },
    //反选
    reveiveShowId() {
      let ids = localStorage.id;
      console.log(ids);
      this.http
        .get(
          "/api/tb_project_reviewspecial/reviewspecialID?specialistID=" + ids
        )
        .then((res) => {
          this.ruleForm1 = res.data[0];
          this.ruleForm1.panelID = this.ruleForm1.panelID.split(",");
          this.ruleForm1.education=
          console.log(res);
        });
    },
    //修改
    submitForm() {
      // (this.ruleForm1.specialistID = localStorage.id),
      //   this.http
      //     .post(
      //       "/api/tb_project_reviewspecial/updateReviewspecial",
      //       this.ruleForm1
      //     )
      //     .then((res) => {
      //       if (res.status) {
      //         console.log(res);
      //         this.$message({
      //           type: "success",
      //           message: res.message,
      //         });
      //       }
      //     });
      this.ruleForm1.panelID = this.ruleForm1.panelID.toString();
      this.ruleForm1.specialistID=localStorage.id;
      let main = {      
        mainData: this.ruleForm1,
        detailData: null,
        delKeys: null,
      };
      console.log(mainData)
      this.http.post("api/tb_project_reviewspecial/Update", main).then((res) => {
        if (res.status) {
          this.$message({
            type: "success",
            message: res.message,
          });
          this.dialogPostVisible = false;
          this.show();
        }
      });
    },

    //添加方法
    add() {
      console.log(this.ruleForm.panelID.toString());
      this.ruleForm.panelID = this.ruleForm.panelID.toString();
      let main = {
        mainData: this.ruleForm,
        detailData: null,
        delKeys: null,
      };
      this.http.post("api/tb_project_reviewspecial/Add", main).then((res) => {
        if (res.status) {
          this.$message({
            type: "success",
            message: res.message,
          });
          this.dialogPostVisible = false;
          this.show();
        }
      });
    },

    //页面显示
    show() {
      this.loading = true;
      let url =
        "api/tb_project_reviewspecial/GetlistReviewspecialAsync?specialistName=" +
        this.specialistName +
        "&panelID=" +
        this.panelID;
      this.http.get(url, {}, true).then((res) => {
        this.tableData = res;
        this.loading = false;
      });
    },
    //查询的下拉显示 Searchoptions
    Searchselect() {
      let url = "api/tb_project_reviewspecial_group/SelectList";
      this.http.get(url, {}, true).then((res) => {
        this.Searchoptions = res.data;
      });
    },

    //列表删除
    DeleteDeclare(index, row) {
      if (confirm("您确定要删除?")) {
        let url =
          "/api/tb_project_reviewspecial/deleteReviewspecial?id=" +
          row.specialistID;
        this.http.post(url, {}, true).then((res) => {
          if (res.status == true) {
            this.$message({
              type: "danger",
              message: res.message,
            });
            this.show();
          }
        });
      }
    },
    //分页
    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`);
    //   this.size = val;
    //   this.show();
    // },
    // handleCurrentChange(val) {
    //   console.log(`当前页: ${val}`);
    //   this.index = val;
    //   this.show();
    // },
  },
};
</script>

<style>
.expertsearch {
  margin-top: 5px;
  margin-left: 10px;
}
.el-transfer-panel {
  overflow: hidden;
  background: var(--el-bg-color-overlay);
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  width: var(--el-transfer-panel-width);
  width: 300px;
  max-height: 100%;
  box-sizing: border-box;
  position: relative;
}
</style>

  








